<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../index.css">
<div class="container-fluid d-flex flex-column" style="overflow:hidden; height:100vh;" id="app">
    <div class="container-fluid" style="height:300px;">
        <div class="row pt-4 align-items-center">
            <!-- <div class="col-1"></div> -->
            <div class="col-2 text-end">生成数量</div>
            <div class="col-2"><input type="number" class="form-control form-control-sm" v-model="formPwd.genCount" @input="checkGenCount($event)"></div>
            <div class="col"></div>
        </div>
        <div class="row mt-2 align-items-center">
            <!-- <div class="col-1"></div> -->
            <div class="col-2 text-end">长度</div>
            <div class="col-2"><input type="number" class="form-control form-control-sm" v-model="formPwd.lengthMin" @change="checkLenMin($event)"></div>-
            <div class="col-2"><input type="number" class="form-control form-control-sm" v-model="formPwd.lengthMax" @change="checkLenMax($event)"></div>
            <div class="col">最少不得少于4个</div>
        </div>
        <div class="row mt-2 align-items-center">
            <!-- <div class="col-1"></div> -->
            <div class="col-2 text-end">使用字符集</div>
            <div class="col-2 text-nowrap">
                <label for="checkNum">
                    <input type="checkbox" v-model="formPwd.checkNum" id="checkNum">&nbsp;数字
                </label>
            </div>
            <div class="col-4"><input type="text" class="form-control form-control-sm" v-model="formPwd.dictNum" @input="checkVal($event, 'num')"></div>
            <div class="col"></div>
        </div>
        <div class="row mt-2 align-items-center">
            <div class="col-2"></div>
            <div class="col-2 text-nowrap">
                <input type="checkbox" v-model="formPwd.checkLower" id="checkLower">&nbsp;<label  class="form-check-label" for="checkLower">小写字母</label>
            </div>
            <div class="col-4"><input type="text" class="form-control form-control-sm" v-model="formPwd.dictLower" @input="checkVal($event, 'lower')"></div>
            <div class="col"></div>
        </div>
        <div class="row mt-2 align-items-center">
            <div class="col-2"></div>
            <div class="col-2 text-nowrap">
                <input type="checkbox" v-model="formPwd.checkCapital" id="checkCapital">&nbsp;<label  class="form-check-label" for="checkCapital">大写字母</label>
            </div>
            <div class="col-4"><input type="text" class="form-control form-control-sm" v-model="formPwd.dictCapital" @input="checkVal($event, 'capital')"></div>
            <div class="col"></div>
        </div>
        <div class="row mt-2 align-items-center">
            <div class="col-2"></div>
            <div class="col-2 text-nowrap">
                <input type="checkbox" v-model="formPwd.checkSymbol" id="checkSymbol">&nbsp;<label  class="form-check-label" for="checkSymbol">特殊符号</label>
            </div>
            <div class="col-4"><input type="text" class="form-control form-control-sm" v-model="formPwd.dictSymbol" @input="checkVal($event, 'symbol')"></div>
            <div class="col"></div>
        </div>
        <div class="row mt-2 align-items-center">
            <div class="col-2"></div>
            <div class="col">
                <button type="button" class="btn btn-primary btn-sm" style="width:100px;" @click="genKey">&nbsp;生&nbsp;&nbsp;成&nbsp;</button>
            </div>
        </div>
    </div>
    <div style="height:100vh;">
        <div class="row mt-2 align-items-start" style="padding-bottom:80px; height:100%">
            <!-- <div class="col-1"></div> -->
            <div class="col-2 text-end">结果</div>
            <div class="col"><textarea class="form-control form-control-sm" style="resize:none; height:100%; font-size:18px;" v-model="formPwd.result"></textarea></div>
            <!-- <div class="col"></div> -->
        </div>
    </div>
    <!-- <div class="container-fluid fixed-bottom position-sticky" style="height:40px;">&nbsp;</div> -->
</div>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../node_modules/vue/dist/vue.global.prod.js"></script>
<script>
const app = {
    data() {
        return {
            formPwd: {
                genCount: 5,
                lengthMin: 16,
                lengthMax: 20,
                dictNum: '23456789',
                dictLower: 'abdefghijmnqrty',
                dictCapital: 'ABDEFGHJLMNQRTY',
                dictSymbol: '@#$%&',
                checkNum: true,
                checkLower: true,
                checkCapital: true,
                checkSymbol: true,
                num: {
                    dict: '23456789',
                    check: true
                },
                lower: {
                    dict: 'abdefghijmnqrty',
                    check: true
                },
                capital : {
                    dict: 'ABDEFGHJLMNQRTY',
                    check: true
                },
                symbol: {
                    dict: '@#$%&',
                    check: true
                },
                result: ''
            }
        }
    },
    created() {
        document.addEventListener('keyup', (e) => {
            if (e.ctrlKey && e.shiftKey && (e.key == 'I' || e.key ==  'i')) {
                parent.devTools();
            }
            if (e.ctrlKey && (e.key == 'r' || e.key == 'R')) {
                parent.refresh();
            }
        });
    },
    methods: {
        checkGenCount(e) {
            if(e.target.value < 1)
                this.formPwd.genCount = 1;
        },
        checkLenMin(e) {
            if(e.target.value < 4)
                this.formPwd.lengthMin = 4;
        },
        checkLenMax(e) {
            if(e.target.value < this.formPwd.lengthMin)
                this.formPwd.lengthMax = this.formPwd.lengthMin;
        },
        checkVal(e, n) {
            console.info(n + '====' + e.target.value)
            e.target.value = quchong(e.target.value);

            switch (n) {
                case 'num':
                    e.target.value = e.target.value.replace(/[^0-9]/g, '')
                    break;
                case 'lower':
                    e.target.value = e.target.value.replace(/[^a-z]/g, '')
                    break;
                case 'capital':
                    e.target.value = e.target.value.replace(/[^A-Z]/g, '')
                    break;
                case 'symbol':
                    e.target.value = e.target.value.replace(/[~!@#$%^&*()_+{}[]\<\>]/g, '')
                default:
                    break;
            }

            if(e.target.value == '') {
                switch (n) {
                    case 'num':
                        this.formPwd.checkNum = false;
                        break;
                    case 'lower':
                        this.formPwd.checkLower = false;
                        break;
                    case 'capital':
                        this.formPwd.checkCapital = false;
                        break;
                    case 'symbol':
                        this.formPwd.checkSymbol = false;
                    default:
                        break;
                }
            }
            // if(e.target.value != '') {
            //     switch (n) {
            //         case 'num':
            //             this.formPwd.checkNum = true;
            //             break;
            //         case 'lower':
            //             this.formPwd.checkLower = true;
            //             break;
            //         case 'capital':
            //             this.formPwd.checkCapital = true;
            //             break;
            //         case 'symbol':
            //             this.formPwd.checkSymbol = true;
            //         default:
            //             break;
            //     }
            // }
        },
        genKey() {
            this.formPwd.result = '';
            if(this.formPwd.lengthMin > this.formPwd.lengthMax) return;

            let countCheck = 0, lenFrom = 0, lenTo = 0;
            if(this.formPwd.checkNum) countCheck++;
            if(this.formPwd.checkLower) countCheck++;
            if(this.formPwd.checkCapital) countCheck++;
            if(this.formPwd.checkSymbol) countCheck++;
            if(countCheck > this.formPwd.lengthMax) {
                alert('长度过小');
                return;
            }
            if(countCheck >= this.formPwd.lengthMin && countCheck <= this.formPwd.lengthMax) {
                lenFrom = countCheck, lenTo = this.formPwd.lengthMax;
            }
            if(countCheck < this.formPwd.lengthMin) {
                lenFrom = this.formPwd.lengthMin, lenTo = this.formPwd.lengthMax;
            }

            let strNum = this.formPwd.checkNum ? this.formPwd.dictNum : '';
            let strLower = this.formPwd.checkLower ? this.formPwd.dictLower : '';
            let strCapital = this.formPwd.checkCapital ? this.formPwd.dictCapital : '';
            let strSymbol = this.formPwd.checkSymbol ? this.formPwd.dictSymbol : '';

            let dict = strNum + strLower + strCapital + strSymbol;
            console.info('当前字典================%s', dict);

            let regexNum = '[' + this.formPwd.dictNum + ']';
            let regexLower = '[' + this.formPwd.dictLower + ']';
            let regexCapital = '[' + this.formPwd.dictCapital + ']';
            let regexSymbol = '[' + this.formPwd.dictSymbol + ']';

            console.info(this.formPwd.checkNum + '==' + this.formPwd.checkLower + '==' + this.formPwd.checkCapital + '==' + this.formPwd.checkSymbol)

            let count = 0, list = [];
            while(true) {
                let len = Math.round(Math.random() * (this.formPwd.lengthMin - this.formPwd.lengthMax) + this.formPwd.lengthMax);
                let result = '';
                while(result.length < len) {
                    result += dict.charAt(Math.floor(Math.random() * dict.length))
                }
                // console.info('B================%s', result);
                if(this.formPwd.checkNum && !(new RegExp(regexNum)).test(result)) {
                    console.error(this.formPwd.checkNum + '===no number');
                    continue;
                }
                if(this.formPwd.checkLower && !(new RegExp(regexLower)).test(result)) {
                    console.error(this.formPwd.checkLower + '===no lowercase');
                    continue;
                }
                if(this.formPwd.checkCapital && !(new RegExp(regexCapital)).test(result)) {
                    console.error(this.formPwd.checkCapital + '===no capital');
                    continue;
                }
                if(this.formPwd.checkSymbol && !(new RegExp(regexSymbol)).test(result)) {
                    console.error(this.formPwd.checkSymbol + '===no sysmbol');
                    continue;
                }
                console.info('A================%s', result);
                list.push(result);
                count++;
                if(count >= this.formPwd.genCount) {
                    break;
                }
            }
            let r = '';
            for(let s of list) {
                r += s + '\r\n';
            }
            this.formPwd.result = r;

            // let count = 0, list = [];
            // while(true){
            //     let len = Math.round(Math.random() * (this.formPwd.lengthMin - this.formPwd.lengthMax) + this.formPwd.lengthMax);
            //     let result = '';
            //     while(result.length < len) {
            //         result += dict.charAt(Math.floor(Math.random() * dict.length))
            //     }
            //     console.info('==========%s===========%s', result, ((new RegExp(regex)).test(result)) );
            //     if((new RegExp(regex)).test(result)) {
            //         list.push(result)
            //         count++;
            //     }
            //     if(count == this.formPwd.genCount) {
            //         break;
            //     }
            // }
            // let r = '';
            // for(let s of list) {
            //     r += s + '\r\n';
            // }
            // this.formPwd.result = r;
        }
    }
}
Vue.createApp(app).mount('#app');

function quchong(str){
    let newStr="";
    for(let i = 0; i < str.length; i++) {
        if(newStr.indexOf(str[i]) == -1) {
            newStr += str[i];
        }
    }
    return newStr;
}
</script>